<template>
    <Teleport to="body">
        <div class="video-play-dialog" v-if="isShow">
            <!-- 关闭按钮 -->
            <var-icon
                class="icon-close"
                name="window-close"
                color="#fff"
                size="30"
                @click="isShow = false"
            />

            <video
                width="100%"
                height="100%"
                :src="props.src"
                webkit-playsinline="true"
                playsinline="true"
                x5-playsinline="true"
                t7-video-player-type="inline"
                x5-video-player-type="h5-page"
                x-webkit-airplay="allow"
                controlslist="nodownload"
                autoplay
                loop
                preload="metadata"
                ref="videoRef"
                :poster="
                    props.src +
                    '?x-oss-process=video/snapshot,t_0,f_jpg,w_480,h_0,m_fast,ar_auto'
                "
            ></video>
        </div>
    </Teleport>
</template>
<script setup>
const props = defineProps({
    src: {
        type: String,
        default: "",
    },
});

const isShow = ref(false);
const videoRef = ref(null);

defineExpose({
    show: () => {
        isShow.value = true;
    },
});
</script>
<style lang="scss" scoped>
.video-play-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.8);

    video {
        position: absolute;
        width: 100%;
        height: 300px;
        top: 50%;
        left: 50%;
        object-fit: cover;
        transform: translate(-50%, -50%);
    }

    .icon-close {
        position: absolute;
        left: 10px;
        top: 10px;
    }
}
</style>
